<template>
    <div>

        <!--        搜索信息区域      -->
        <el-card style="width: 100%; height: 10vh;">
            <el-form :inline="true">

                <el-form-item label="店铺账号" label-width="70px">
                    <el-input style="width: 175px" clearable v-model="searchUsername"
                              placeholder="请输入店铺账号"></el-input>
                </el-form-item>

                <el-form-item label="店铺名" label-width="55px">
                    <el-input style="width: 175px" clearable v-model="searchName" placeholder="请输入店铺名"></el-input>
                </el-form-item>

                <el-form-item label="手机号" label-width="55px">
                    <el-input style="width: 175px" type="number" clearable v-model="searchPhone"
                              placeholder="请输入手机号"></el-input>
                </el-form-item>

                <!--                <el-form-item label="电子邮箱" label-width="70px">
                                    <el-input style="width: 175px" clearable v-model="searchEmail" placeholder="请输入电子邮箱"></el-input>
                                </el-form-item>-->

                <el-form-item label="状态" label-width="53px">
                    <el-select v-model="searchStatus" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in statuss"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button style="margin-left: 20px" type="primary" @click="searchByManyCondition" plain> 搜 索
                </el-button>
                <el-button @click="resetCondition"> 重 置</el-button>
            </el-form>
        </el-card>


        <!--           商家信息表格        -->
        <el-card style="width: 100%; ">

            <!--          商家信息    标题-->
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;font-size: 18px">商家信息</span>
                <el-button style="float: right;margin-right: 10px" type="danger" @click="deleteSelectStores"> 删除选中
                </el-button>
                <el-button style="float: right;margin-right: 20px" type="primary" plain @click="showAddStore">
                    添加商家
                </el-button>
                <el-button style="float: right;margin-right: 10px" type="primary" plain @click="selectAll"> 查询所有商家
                </el-button>

                <!-- 添加信息的弹窗 -->
                <el-dialog title="添加商家" :visible.sync="dialogVisible_addStore">
                    <el-form :model="add_store" size="medium" :rules="rules" ref="addStoreRef"
                             :validate-on-rule-change="false">

                        <el-form-item prop="username" label="账号" label-width="100px">
                            <el-input v-model="add_store.username" placeholder="请输入商家账号"></el-input>
                        </el-form-item>

                        <el-form-item prop="password" label="密码" label-width="100px">
                            <el-input show-password v-model="add_store.password" placeholder="请输入密码"
                                      autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item prop="name" label="店铺名称" label-width="100px">
                            <el-input v-model="add_store.name" autocomplete="off"
                                      placeholder="请输入店铺名称"></el-input>
                        </el-form-item>

                        <el-form-item prop="detail" label="店铺介绍" label-width="100px">
                            <el-input type="textarea" v-model="add_store.detail" placeholder="请输入店铺介绍"
                                      style="width: 478px;margin-left: 20px"></el-input>
                        </el-form-item>

                        <el-form-item prop="phone" label="手机号" label-width="100px">
                            <el-input v-model="add_store.phone" autocomplete="off"
                                      placeholder="请输入手机号"></el-input>
                        </el-form-item>

                        <el-form-item prop="email" label="电子邮箱" label-width="100px">
                            <el-input v-model="add_store.email" autocomplete="off"
                                      placeholder="请输入电子邮箱"></el-input>
                        </el-form-item>

                        <el-form-item prop="address" label="地址" label-width="100px">
                            <el-input v-model="add_store.address" autocomplete="off"
                                      placeholder="请输入地址"></el-input>
                        </el-form-item>

                        <el-form-item prop="avatar" label="头像" label-width="100px">
                            <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                <el-avatar shape="square" :size="100" fit="fill"
                                           :src="add_store.avatar"></el-avatar>
                                <el-upload
                                        :show-file-list="false"
                                        :action="$baseUrl + '/file/upload'"
                                        :on-success="handleFileUpload"
                                        style="margin-left: 50px"
                                >
                                    <el-button type="primary">上传头像</el-button>
                                </el-upload>

                            </div>

                        </el-form-item>
                        <el-form-item prop="status" label="状态" label-width="100px">
                            <el-select v-model="add_store.status" placeholder="请选择状态">
                                <el-option
                                        v-for="item in statuss"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>


                    <div slot="footer" class="dialog-footer">
                        <el-button type="warning" @click="resetAddStore"> 重 置</el-button>
                        <el-button @click="cancelDialog_addStore"> 取 消</el-button>
                        <el-button type="primary" @click="handleEdit_addStore"> 确 定</el-button>
                    </div>

                </el-dialog>

                <!-- 删除商家信息的弹窗 -->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible_deleteSelect"
                        width="30%">
                    <span>真的要删除选中的所有信息吗？</span>
                    <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_deleteSelect = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteStores">确 定</el-button>
                                </span>
                </el-dialog>

            </div>


            <!--     商家信息列表    展示-->
            <template>
                <el-table height="410"
                          :header-cell-style="{fontSize: '14px','text-align':'center'}"
                          :cell-style="{'text-align':'center'}"
                          :data="stores"
                          @selection-change="handleSelectCodeForTicket"
                          stripe
                          style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                    <el-table-column prop="username" label="店铺账号" show-overflow-tooltip
                                     width="100px"></el-table-column>
                    <el-table-column prop="name" label="店铺名" width="100px"></el-table-column>
                    <el-table-column prop="phone" label="手机号" width="150px"></el-table-column>
                    <el-table-column prop="email" label="电子邮箱" show-overflow-tooltip
                                     width="180px"></el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip width="200px"></el-table-column>
                    <!--                    <el-table-column prop="id" label="ID" width="80px"></el-table-column>-->
                    <el-table-column label="状态" width="74">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="dark" v-if="scope.row.status==0">已删除</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.status==1">正常</el-tag>
                            <el-tag type="warning" effect="dark" v-if="scope.row.status==2">锁定中</el-tag>
                            <el-tag type="warning" effect="dark" v-if="scope.row.status==3">冻结中</el-tag>
                            <el-tag type="info" effect="dark" v-if="scope.row.status==4">待审核</el-tag>
                        </template>
                    </el-table-column>

                    <!--      头像显示    -->
                    <el-table-column prop="avatar" label="头像" width="59px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" fit="fill" :src="scope.row.avatar"></el-avatar>
                        </template>
                    </el-table-column>


                    <el-table-column label="审核状态" width="90">

                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status!==1"
                                       size="mini" type="primary" plain
                                       @click="passStore(scope.row)">通过
                            </el-button>
                            <div v-if="scope.row.status===1">
                                <el-tag type="danger" v-if="scope.row.status==0">已删除</el-tag>
                                <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
                                <el-tag type="warning" v-if="scope.row.status==2">锁定中</el-tag>
                                <el-tag type="warning" v-if="scope.row.status==3">冻结中</el-tag>
                                <el-tag type="info" v-if="scope.row.status==4">待审核</el-tag>
                            </div>

                        </template>
                    </el-table-column>

                    <el-table-column label="操作">

                        <!--          编辑  +  删除   商家-->
                        <template slot-scope="scope">

                            <!--    查看详情    -->
                            <!--    查看详情按钮    -->
                            <router-link style="margin: 0 10px"
                                         :to="{ path: '/manager/storeInfo',  query: { id: scope.row.id } }">
                                <el-button icon="el-icon-search" circle></el-button>
                            </router-link>

                            <!--                                            编辑按钮    -->
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="handleEditButton(scope.row)"></el-button>
                            <!--                                            删除按钮    -->
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="handleDeleteButton(scope.row)"></el-button>


                            <!-- 删除商家信息的弹窗 -->
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible_delete"
                                    width="30%">
                                <span style="display: flex;">真的要删除这条信息吗？</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_delete = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteStore">确 定</el-button>
                                </span>
                            </el-dialog>


                            <!-- 编辑信息的弹窗 -->
                            <el-dialog title="修改商家信息" :visible.sync="dialogFormVisible_edit">
                                <el-form :model="edit_store" size="medium" :rules="rules" ref="editStoreRef"
                                         :validate-on-rule-change="false">

                                    <el-form-item label="ID" label-width="100px">
                                        <el-input v-model="edit_store.id" :disabled="true"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="username" label="账号" label-width="100px">
                                        <el-input v-model="edit_store.username" placeholder="请输入账号"></el-input>
                                    </el-form-item>

                                    <el-form-item label="密码" label-width="100px">
                                        <el-input show-password v-model="edit_store.password"
                                                  autocomplete="off" placeholder="请输入新密码"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="name" label="店铺名称" label-width="100px">
                                        <el-input v-model="edit_store.name" autocomplete="off"
                                                  placeholder="请输入店铺名称"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="detail" label="店铺介绍" label-width="100px">
                                        <el-input type="textarea" v-model="edit_store.detail"
                                                  placeholder="请输入店铺介绍"
                                                  style="width: 478px;margin-left: 20px"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="phone" label="手机号" label-width="100px">
                                        <el-input v-model="edit_store.phone" autocomplete="off"
                                                  placeholder="请输入手机号"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="email" label="电子邮箱" label-width="100px">
                                        <el-input v-model="edit_store.email" autocomplete="off"
                                                  placeholder="请输入电子邮箱"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="address" label="地址" label-width="100px">
                                        <el-input v-model="edit_store.address" autocomplete="off"
                                                  placeholder="请输入地址"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="avatar" label="头像" label-width="100px">
                                        <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                            <el-avatar shape="square"
                                                       :size="100"
                                                       fit="fill"
                                                       :src="edit_store.avatar"
                                                       style="margin-left: 50px"
                                            ></el-avatar>
                                            <el-upload
                                                    :show-file-list="false"
                                                    :action="$baseUrl + '/file/upload'"
                                                    :on-success="handleFileUpload"
                                                    style="margin-left: 50px"
                                            >
                                                <el-button type="primary">上传头像</el-button>
                                            </el-upload>

                                        </div>

                                    </el-form-item>

                                    <el-form-item prop="status" label="状态" label-width="100px">
                                        <el-select style="float: left;margin-left: 50px" v-model="edit_store.status"
                                                   placeholder="请选择状态">
                                            <el-option
                                                    v-for="item in statuss"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>


                                </el-form>


                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelDialog_editStore">取 消</el-button>
                                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                                </div>

                            </el-dialog>
                        </template>
                    </el-table-column>


                </el-table>

            </template>

            <el-pagination
                    style="float: right;margin: 20px 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    background
                    :total="total">
            </el-pagination>
            <!--
                            @size-change="handleSizeChange"          pageSize 改变时会触发
                            @current-change="handleCurrentChange"    currentPage 改变时会触发
            -->
        </el-card>

    </div>
</template>

<script>

import crypto from "@/utils/encryp";
import dateUtil from '@/utils/dateUtil'

export default {
    name: 'Store',
    data() {
        // 手机号验证
        const validatePhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            }
        };
        return {
            dialogFormVisible_edit: false,      // 编辑按钮弹出框
            dialogVisible_delete: false,        // 删除按钮弹出框
            dialogVisible_deleteSelect: false,  // 选中删除按钮弹出框
            dialogVisible_addStore: false,      // 添加商家按钮弹出框

            storeId: '',             // 存储被删除商家的id
            ids: [],                 // 存储被选中商家的id
            stores: [],              // 存储商家信息

            edit_store: {},          // 存储当前操作的商家
            edit_store_temp: {},     // 存储当前操作的商家
            add_store: {
                status: []
            },                       // 存储添加的商家信息
            avatarUrl: '',           // 暂存后台传回来的图片链接

            searchUsername: '',      // 存储搜索的商家名
            searchName: '',          // 存储搜索的姓名
            searchPhone: '',         // 存储搜索的手机号
            searchEmail: '',         // 存储搜索的邮箱
            searchStatus: '',       // 存储搜索的状态
            statuss: [{             // 存储所有状态
                value: 0,
                label: '已删除'
            }, {
                value: 1,
                label: '正常'
            }, {
                value: 2,
                label: '锁定中'
            }, {
                value: 3,
                label: '冻结中'
            }, {
                value: 4,
                label: '待审核'
            }],

            currentPage: 1,          // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,             // 每页显示条数
            total: 0,                // 商家总数

            // 输入校验规则
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 4, message: '账号最少为4个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入店铺名称', trigger: 'blur'}
                ],
                phone: [
                    {required: true, validator: validatePhone, message: '请输入正确手机号', trigger: "change"}
                ],
                email: [
                    {required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
                avatarUrl: [
                    {required: true, message: '请上传头像', trigger: 'blur'}
                ],
                detail: [
                    {required: true, message: '请填写店铺介绍', trigger: 'blur'}
                ],
                avatar: [
                    {required: true, message: '请上传头像', trigger: 'blur'}
                ]
                // ,
                // status: [
                //     {required: true, message: '请选择状态', trigger: 'change', type: 'number'}
                // ],
                // searchStatus: [
                //     {required: true, message: '请选择状态', trigger: 'change', type: 'number'}
                // ]

            }

        }
    },
    mounted() {
        // this.$request.get('/store/selectByPage?currentPage=1&pageSize=5').then(res => {
        //     if (res.code === '200') {
        //         this.stores = res.data.list;
        //         this.total = res.data.total;
        //     } else {
        //         this.$message.error(res.msg);
        //     }
        // })
        this.searchByManyConditionNoMsg()
    },


    methods: {

        // 移除表单的校验
        clearcheck(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].clearValidate()
            }
        },

        // 查询所有商家
        selectAll() {
            this.$request.get('/store/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.stores = res.data.list;
                    this.total = res.data.total;
                    this.$message.success('查询成功');
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 添加商家
        handleEdit_addStore() {
            // 将头像数据载入
            // this.add_store.avatar = this.avatarUrl
            this.dialogVisible_addStore = false;
            // 加密密码处理
            if (this.add_store.password !== ''
                && this.add_store.password !== undefined
                && this.add_store.password !== null) {
                // 加密密码处理
                let pwd = this.add_store.password.toString()
                pwd = this.$md5(pwd)
                this.add_store.password = pwd
            }

            // 设置创建时间
            this.add_store.createTime = dateUtil.formatDate(new Date())
            // 输入检验
            this.$refs['addStoreRef'].validate((valid) => {
                if (valid) {
                    this.avatarUrl = ''
                    // 校验通过
                    // 添加商家
                    this.$request.post('/store/addStore', this.add_store).then(res => {
                        this.add_store = {}
                        if (res.code === '200') {
                            this.$message.success('添加成功')
                            this.searchByManyConditionNoMsg()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })
        },


        // 取消添加商家
        cancelDialog_addStore() {
            this.avatarUrl = ''
            this.dialogVisible_addStore = false;
        },

        // 重置添加的信息
        resetAddStore() {
            this.add_store = {}
            this.avatarUrl = ''
        },

        // 显示添加商家的弹出框
        showAddStore() {
            this.clearcheck('addStoreRef')
            this.dialogVisible_addStore = true;
            this.avatarUrl = ''
            this.add_store = {}
        },


        // 删除选中二次确认
        handleDeleteStores() {
            this.dialogVisible_deleteSelect = false;
            if (this.ids.length > 0) {
                // 删除选中
                this.$request.post('/store/deleteByIds', this.ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功');
                        // 刷新数据
                        this.searchByManyConditionNoMsg()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$message.info('请选择要删除的商家');
            }
        },


        // 删除选中二次提醒
        deleteSelectStores() {
            // 显示二次提醒弹窗
            this.dialogVisible_deleteSelect = true;
        },

        // 获取选中的商家id，
        // 并存储到 ids 数组中
        handleSelectCodeForTicket(val) {
            this.ids = val.map((item) => item.id);
        },


        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据
            this.searchByManyConditionNoMsg()
        },


        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            this.searchByManyConditionNoMsg()
        },


        // 条件查询
        searchByManyCondition() {

            // 如果状态未选择的话，调用A接口
            // 否则调用B接口
            // A接口不包括状态参数
            // B接口包括状态参数
            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                // 如果searchStatus的值不为空，则将其转换为整数
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/store/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&status=' + this.searchStatus).then(res => {
                    if (res.code === '200') {
                        this.stores = res.data.list
                        this.total = res.data.total
                        this.$message.success("查询成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$request.get('/store/selectByManyConditionNoStatusInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone).then(res => {
                    if (res.code === '200') {
                        this.stores = res.data.list
                        this.total = res.data.total
                        this.$message.success("查询成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }


        },

        // 条件查询 用来刷新数据不提示
        searchByManyConditionNoMsg() {
            // 如果状态未选择的话，调用A接口
            // 否则调用B接口
            // A接口不包括状态参数
            // B接口包括状态参数
            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                // 如果searchStatus的值不为空，则将其转换为整数
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/store/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&status=' + this.searchStatus).then(res => {
                    if (res.code === '200') {
                        this.stores = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$request.get('/store/selectByManyConditionNoStatusInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone).then(res => {
                    if (res.code === '200') {
                        this.stores = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }
        },

        // 分页查找
        selectByPage() {
            this.$request.get('/store/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.stores = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // 重置搜索条件
        resetCondition() {
            this.searchUsername = ''
            this.searchName = ''
            this.searchPhone = ''
            this.searchEmail = ''
            this.searchStatus = ''
            this.currentPage = 1
            this.pageSize = 5
            // 刷新获取商家信息
            this.$request.get('/store/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.stores = res.data.list
                    this.total = res.data.total
                    this.$message.success("重置成功")
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 处理 头像上传按钮   的点击事件
        handleFileUpload(response, file, fileList) {
            // 判断上传的文件的类型
            // 只能上传图片类型，如果不是图片资源那么提示“只能上传图片！！”
            if (!file.raw.type.includes('image')) {
                this.$message.error('只能上传图片！')
                return
            }
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址

            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.avatarUrl = url;
            this.add_store.avatar = url
            this.edit_store.avatar = url
            // 刷新头像信息
            this.$forceUpdate()
        },

        // 显示 修改商家信息    弹窗
        handleEditButton(store) {
            this.clearcheck('editStoreRef')
            // 将当前行的商家数据传入form中
            this.edit_store = JSON.parse(JSON.stringify(store));
            this.edit_store_temp = JSON.parse(JSON.stringify(store));
            // 更新当前头像
            this.avatarUrl = JSON.parse(JSON.stringify(store.avatar))
            // 状态转化
            let status = parseInt(store.status)
            for (let i = 0; i < this.statuss.length; i++) {
                if (status === this.statuss[i].value) {
                    this.edit_store.status = this.statuss[i].label
                    break
                }
            }
            // 删除商家密码信息
            this.edit_store.password = ''
            // 显示弹窗
            this.dialogFormVisible_edit = true;
        },

        // 删除按钮二次提醒
        handleDeleteButton(store) {
            this.dialogVisible_delete = true
            this.storeId = store.id
        },


        // 删除当前商家
        handleDeleteStore() {
            this.dialogVisible_delete = false;
            this.$request.delete('/store/deleteById/' + this.storeId).then(res => {
                if (res.code === '200') {
                    this.$message.success('删除成功');
                    this.storeId = ''
                    // 重新加载数据
                    this.searchByManyConditionNoMsg()
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // 取消修改信息
        cancelDialog_editStore() {
            this.dialogFormVisible_edit = false;
            this.edit_store = {}
            this.avatarUrl = ''
        },


        passStore(store) {
            console.log(store)
            store.status = 1
            this.$request.put('/store/updateById', store).then(res => {
                if (res.code === '200') {
                    this.$message.success('审核通过');
                    this.searchByManyConditionNoMsg()
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 修改商家信息
        handleEdit() {
            // 更新商家头像信息
            // this.edit_store.avatar = this.avatarUrl
            // 防止密码为空的的报错
            if (this.edit_store.password !== ''
                && this.edit_store.password !== undefined
                && this.edit_store.password !== null) {
                // 加密密码处理
                let pwd = this.edit_store.password
                pwd = this.$md5(pwd)
                this.edit_store.password = pwd
            } else {
                this.edit_store.password = this.edit_store_temp.password
            }
            // 状态转化
            for (let i = 0; i < this.statuss.length; i++) {
                if (this.edit_store.status === this.statuss[i].label) {
                    this.edit_store.status = this.statuss[i].value
                    break
                }
            }
            this.dialogFormVisible_edit = false;
            // 输入检验
            this.$refs['editStoreRef'].validate((valid) => {
                if (valid) {
                    // 校验通过
                    this.$request.put('/store/updateById', this.edit_store).then(res => {
                        // console.log(res)
                        if (res.code === '200') {
                            this.$message.success('修改成功');
                            this.edit_store = {}
                            this.avatarUrl = ''
                            // 重新加载数据
                            this.searchByManyConditionNoMsg()
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })
        }
    }
}
</script>


<style>
.el-dialog__body {
    padding: 10px 30px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}


</style>